<template>
  <div class="search-box">
    <i class="icon-search"/>
    <input ref="query" :placeholder="placeholder" v-model="query" type="text" class="inputbox">
    <i v-show="query" class="icon-dismiss" @click="clear"/>
  </div>
</template>

<script type="text/ecmascript-6">
import { debounce } from 'common/js/util'
export default{
  props: {
    placeholder: {
      type: String,
      default: '搜索歌曲、歌手'
    }
  },
  data () {
    return {
      query: ''
    }
  },
  created () {
    // 监视query的变化 派发时间
    this.$watch('query', debounce((newQuery, oldQuery) => {
      this.$emit('query', newQuery)
    }, 300))
  },
  methods: {
    clear () {
      this.query = ''
    },
    setQuery (query) {
      this.query = query
    },
    blur () {
      this.$refs.query.blur()
    }
  }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
.search-box
  height 40px;
  background-color $color-highlight-background;
  border-radius 5px;
  display flex;
  align-items center;
  padding 0 4px;
  .icon-search
    font-size $font-size-large-x;
    color $color-background;
  .inputbox
    flex 1;
    height 100%;
    text-indent 4px;
    background-color $color-highlight-background;
    color $color-text;
    border 0px;
    outline none;
  .icon-dismiss
    font-size $font-size-large;
    color $color-background;
    padding 10px 10px;
</style>
